<template>
    <section class="PreferenceSettings-section">
        <!--投资偏好表单-->
        <a-form layout="horizontal" :form="form" class="form-box">
            <div class="clearfix topBar">
                <h4>投资偏好</h4>
                <aside>
                    <a-button type="primary" v-if="!isShowPreference" @click="showPreference"><i class="iconfont icon-xiugai"></i> 修改</a-button>
                </aside>
            </div>
            <ul v-show="!isShowPreference" class="borderBottom-box">
                <li>
                    您感兴趣的城市：&nbsp;&nbsp;{{isNull0(formPreference.tendencySite.join())}}
                </li>
                <li>
                    您感兴趣的房屋类型：&nbsp;&nbsp;{{isNull0(formPreference.tendencyRoom.join())}}
                </li>
                <li>
                    您的投资偏好：&nbsp;&nbsp;{{isNull0(formPreference.investmentObjective.join())}}
                </li>
                <li>
                    您的资金来源：&nbsp;&nbsp;
                    <span v-show="formPreference.capitalSource == '0'">国内资金</span>
                    <span v-show="formPreference.capitalSource == '1'">海外资金</span>
                    <span v-show="formPreference.capitalSource == '' || formPreference.capitalSource == null">-</span>
                </li>
                <li>
                    您的购房预算：&nbsp;&nbsp;{{isNull0(formPreference.tendencyPrice.join())}}
                </li>
                <li>
                    您的居住面积：&nbsp;&nbsp;{{isNull0(formPreference.tendencySize.join())}}
                </li>
                <li>
                    学校评分：&nbsp;&nbsp;{{isNull0(formPreference.tendencySchool.join())}}<span style="font-size: 14px; color: #5f5f5f;"> （说明：1~5分：不理想，6~7分：合格，8~10分：优秀）</span>
                </li>
            </ul>

            <div v-show="isShowPreference">
                <a-form-item label="意向城市" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-checkbox-group style="padding: 0 30px 0 0;"
                        v-decorator="['tendencySite', {rules: [
                            { type: 'array', required: true, message: '请选择意向城市', trigger: 'change' }
                        ]}]">
                        <a-row>
                            <a-col :span="6" v-for="(item, index) in checkBoxCityItem" :key="index">
                                <a-checkbox :value="item.chineseName">{{item.chineseName}}</a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="房屋类型" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-checkbox-group style="padding: 0 30px 0 0;"
                        v-decorator="['tendencyRoom', {rules: [
                            { type: 'array', required: true, message: '请选择房屋类型', trigger: 'change' }
                        ]}]">
                        <a-row>
                            <a-col :span="6" v-for="(item, index) in checkBoxHouseTypeItem" :key="index">
                                <a-checkbox :value="item.title">{{item.title}}</a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="投资类型" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-checkbox-group style="padding: 0 30px 0 0;"
                        v-decorator="['investmentObjective', {rules: [
                            { type: 'array', required: true, message: '请选择投资类型', trigger: 'change' }
                        ]}]">
                        <a-row>
                            <a-col :span="6" v-for="(item, index) in checkBoxInvestmentPreferenceItem"
                                   :key="index">
                                <a-checkbox :value="item.title">{{item.title}}</a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="资金来源" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-radio-group style="padding: 0 30px 0 0;"
                                   v-decorator="['capitalSource', {rules: [
                                        { type: 'string', required: true, message: '请选择资金来源', trigger: 'change' }
                                   ]}]">
                        <a-radio value="0">国内资金</a-radio>
                        <a-radio value="1">海外资金</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="购房预算" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-checkbox-group class="tendencyPrice-box" style="padding: 0 30px 0 0;"
                        v-decorator="['tendencyPrice', {rules: [
                            { type: 'array', required: true, message: '请选择购房预算', trigger: 'change' }
                        ]}]">
                        <a-row>
                            <a-col :span="6" v-for="(item, index) in checkBoxBuyHouseBudgetItem" :key="index">
                                <a-checkbox :value="item.title">{{item.title}}</a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="居住面积" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-checkbox-group class="tendencySize-box" style="padding: 0 30px 0 0;"
                        v-decorator="['tendencySize', {rules: [
                            { type: 'array', required: true, message: '请选择居住面积', trigger: 'change' }
                        ]}]">
                        <a-row>
                            <a-col :span="6" v-for="(item, index) in checkBoxArea" :key="index">
                                <a-checkbox :value="item.value">{{item.label}}</a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="学区评分" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-checkbox-group class="clearfix checkBox-greatSchool" style="padding: 0 30px 0 0;"
                                      v-decorator="['tendencySchool', {rules: [
                                            { type: 'array', required: true, message: '请选择学区评分倾向', trigger: 'change' }
                                      ]}]">
                        <a-checkbox value="1~5">
                            不理想&nbsp;&nbsp;&nbsp;&nbsp;<span class="Not-ideal"><i>1</i> ~ <i>5</i></span>
                        </a-checkbox>
                        <a-checkbox value="6~7">
                            合格&nbsp;&nbsp;&nbsp;&nbsp;<span class="qualified"><i>6</i> ~ <i>7</i></span>
                        </a-checkbox>
                        <a-checkbox value="8~10">
                            优秀&nbsp;&nbsp;&nbsp;&nbsp;<span class="excellent"><i>8</i> ~ <i>10</i></span>
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-item>

                <a-form-item style="text-align: center">
                    <a-button v-if="isShowPreference" @click="showPreference" style="margin: 0 15px;"><i class="iconfont icon-cencel"></i> 取消</a-button>
                    <a-button htmlType="submit" type="primary" v-if="isShowPreference" @click="submitBasicInfo" style="margin: 0 15px;"><i class="iconfont icon-submit"></i> 保存</a-button>
                </a-form-item>
            </div>
        </a-form>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isShowPreference: false, // 投资偏好展示和修改是否显示/隐藏
                checkBoxCityItem: [], // 获取意向城市数据
                checkBoxHouseTypeItem: [], // 获取房屋类型数据
                checkBoxInvestmentPreferenceItem: [], // 获取投资类型数据
                checkBoxBuyHouseBudgetItem: [], // 获取房屋总价/购房预算数据
                //面积倾向数据
                checkBoxArea: [
                    {
                        label: '100平米以内',
                        value: '100平米以内'
                    },
                    {
                        label: '150平米以内',
                        value: '150平米以内'
                    },
                    {
                        label: '200平米以内',
                        value: '200平米以内'
                    },
                    {
                        label: '240平米以内',
                        value: '240平米以内'
                    },
                    {
                        label: '300平米以内',
                        value: '300平米以内'
                    },
                    {
                        label: '400平米以内',
                        value: '400平米以内'
                    },
                    {
                        label: '500平米以内',
                        value: '500平米以内'
                    },
                    {
                        label: '500平米以上',
                        value: '500平米以上'
                    }
                ],
                formPreference: {
                    tendencySite: [], // 意向城市
                    tendencyRoom: [], // 房源类型
                    investmentObjective: [], // 投资偏好
                    capitalSource: '1', // 资金来源
                    tendencyPrice: [], //购房预算
                    tendencySize: [], // 面积倾向
                    tendencySchool: []// 学区评分
                },
                form: this.$form.createForm(this),

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            this.getCityData(); // 获取意向城市数据列表
            this.getHouseTypeData(); // 获取房屋类型数据列表
            this.getInvestmentPreferenceTypeData(); //获取投资类型列表
            this.getBuyHouseBudgetData(); // 获取房屋总价/购房预算列表
            this.getUserInvest();//获取个人选房偏好

        },
        destroyed() {
        },
        methods: {
            // 获取意向城市数据
            getCityData() {
                this.$get('/city/list/1/20').then(res => {
                    if (res.status === 0) {
                        this.checkBoxCityItem = res.list
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取房屋类型数据
            getHouseTypeData() {
                this.$get('/house/project/type').then(res => {
                    if (res.status === 0) {
                        this.checkBoxHouseTypeItem = res.data
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取投资类型列表
            getInvestmentPreferenceTypeData() {
                this.$get('/house/investment/type').then(res => {
                    if (res.status === 0) {
                        this.checkBoxInvestmentPreferenceItem = res.data
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取房屋总价/购房预算列表
            getBuyHouseBudgetData() {
                this.$get('/house/price/section').then(res => {
                    if (res.status === 0) {
                        this.checkBoxBuyHouseBudgetItem = res.data
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取个人选房偏好
            getUserInvest(){
                this.$get('/user/invest/info').then(res => {
                    if (res.status == 0) {
                        this.formPreference.tendencySite = res.data.tendencySite ? res.data.tendencySite.split(',') : [];
                        this.formPreference.tendencyRoom = res.data.tendencyRoom ? res.data.tendencyRoom.split(',') : [];
                        this.formPreference.investmentObjective = res.data.investmentObjective ? res.data.investmentObjective.split(',') : [];
                        this.formPreference.capitalSource = res.data.capitalSource || '1';
                        this.formPreference.tendencyPrice = res.data.tendencyPrice ? res.data.tendencyPrice.split(',') : [];
                        this.formPreference.tendencySize = res.data.tendencySize ? res.data.tendencySize.split(',') : [];
                        this.formPreference.tendencySchool = res.data.tendencySchool ? res.data.tendencySchool.split(',') : [];

                        //给antd表单项赋值
                        this.form.setFieldsValue({
                            tendencySite: res.data.tendencySite ? res.data.tendencySite.split(',') : [], // 意向城市
                            tendencyRoom: res.data.tendencyRoom ? res.data.tendencyRoom.split(',') : [],// 房源类型
                            investmentObjective: res.data.investmentObjective ? res.data.investmentObjective.split(',') : [],// 投资偏好
                            capitalSource: res.data.capitalSource || '1',// 资金来源
                            tendencyPrice: res.data.tendencyPrice ? res.data.tendencyPrice.split(',') : [],//购房预算
                            tendencySize: res.data.tendencySize ? res.data.tendencySize.split(',') : [], // 面积倾向
                            tendencySchool: res.data.tendencySchool ? res.data.tendencySchool.split(',') : []// 学区评分
                        });
                    } else{
                        console.log(res.msg);
                    }
                })
            },
            // 投资偏好展示和修改切换
            showPreference() {
                this.isShowPreference = !this.isShowPreference
            },
            // 提交投资偏好保存信息
            submitBasicInfo(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.$post('/user/invest/update', {
                            tendencySite: values.tendencySite.join(),        //意向城市
                            tendencyRoom: values.tendencyRoom.join(),   //房源类型
                            investmentObjective: values.investmentObjective.join(),   //投资偏好
                            capitalSource: values.capitalSource,      //资金来源
                            tendencyPrice: values.tendencyPrice.join(),      //购房预算
                            tendencySize: values.tendencySize.join(),        //面积倾向
                            tendencySchool: values.tendencySchool.join(),    //学区评分
                        }).then(res => {
                            if (res.status == 0) {
                                this.$message.success('您的投资偏好修改成功！');
                                //更新用户投资偏好
                                this.getUserInvest();
                                this.isShowPreference = false;  // 投资偏好展示和修改切换
                            } else {
                                this.$message.warning(res.msg);
                            }
                        })
                    } else {
                        this.$message.error('表单项选择有误，请检查并确定选择！');
                    }
                });
            },

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .PreferenceSettings-section {
            .form-box {
                .ant-checkbox-group,
                .ant-radio-group {
                    width: 100%;
                    > .ant-row {
                        > div {
                            margin: 10px 0;
                        }
                    }
                }

                /*学区评分*/
                .checkBox-greatSchool {
                    span.Not-ideal i,
                    span.qualified i,
                    span.excellent i {
                        display: inline-block;
                        width: 22px;
                        height: 22px;
                        line-height: 22px;
                        text-align: center;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 50%;
                    }
                    span.Not-ideal i {
                        background: #f75355;
                    }
                    span.qualified i {
                        background: #fbaa60;
                    }
                    span.excellent i {
                        background: #83bb71;
                    }
                }
            }
        }
    }
</style>
